Arhitektura Dodataka za JavaScript Module Federation: Izrada Dinamičkog Sustava Dodataka

U današnjem složenom krajoliku web razvoja, izgradnja modularnih, skalabilnih i održivih aplikacija je ključna. Jedna moćna tehnika za postizanje toga je kroz arhitekturu dodataka, gdje se funkcionalnost razlaže na neovisne, dinamički učitane module. JavaScript Module Federation, značajka Webpacka 5, pruža snažan mehanizam za implementaciju takvih arhitektura. Ovaj članak detaljno obrađuje zamršenosti korištenja Module Federation za izgradnju dinamičkog sustava dodataka.

Što je Module Federation?

Module Federation omogućuje JavaScript aplikacijama dinamičku razmjenu koda u vrijeme izvođenja. To znači da se modul (dio koda) iz jedne aplikacije može izravno koristiti drugom aplikacijom, bez potrebe za ponovnom kompilacijom ili ponovnim postavljanjem. To se postiže izlaganjem i korištenjem modula kroz različite kompilacije, pa čak i različita postavljanja.

Tradicionalne metode dijeljenja koda, kao što su npm paketi, zahtijevaju ponovnu kompilaciju i ponovno postavljanje aplikacija koje ih koriste kad god se ažurira zajednička ovisnost. Module Federation eliminira ovaj dodatni napor, čineći ga idealnim za scenarije gdje su potrebna česta ažuriranja i neovisna postavljanja.

Zašto koristiti Module Federation za arhitekture dodataka?

Module Federation nudi nekoliko prednosti pri izgradnji arhitektura dodataka:

• Dinamičko učitavanje modula: Dodaci se mogu učitavati i istovariti u vrijeme izvođenja, omogućujući aplikacijama da se prilagode promjenjivim zahtjevima bez potrebe za potpunim ponovnim postavljanjem.
• Razdvajanje: Dodaci se razvijaju i postavljaju neovisno, smanjujući ovisnosti između različitih dijelova aplikacije.
• Skalabilnost: Aplikacija se može lako proširiti novim dodacima bez utjecaja na postojeću funkcionalnost.
• Održivost: Dodaci se mogu ažurirati i održavati neovisno, smanjujući rizik od unošenja programskih pogrešaka u osnovnu aplikaciju.
• Ponovna upotreba koda: Dodaci se mogu ponovno koristiti u više aplikacija, promičući dosljednost i smanjujući razvojni napor.
• Verzioniranje i vraćanje na prethodnu verziju: Možete upravljati različitim verzijama dodataka i lako se vratiti na prethodne verzije ako je potrebno.

Ključni koncepti: Spremnici za domaćina i udaljeni spremnici

Module Federation se vrti oko dva ključna koncepta:

• Spremnik za domaćina: Glavna aplikacija koja koristi udaljene module (dodatke).
• Udaljeni spremnik: Aplikacija koja izlaže module (dodatke) koje će koristiti domaćin.

Spremnik za domaćina dinamički dohvaća ulaznu datoteku udaljenog spremnika iz udaljenog spremnika, koja sadrži popis izloženih modula. Domaćin zatim može pristupiti i koristiti te module kao da su dio vlastitog koda.

Implementacija dinamičkog sustava dodataka pomoću Module Federation: Vodič korak po korak

Prođimo kroz proces izgradnje jednostavnog sustava dodataka pomoću Module Federation. Izradit ćemo domaćinsku aplikaciju i udaljeni dodatak.

1. Postavljanje domaćinske aplikacije (Spremnik za domaćina)

Prvo, stvorite novi direktorij projekta i inicijalizirajte novi npm projekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Instalirajte Webpack i njegove ovisnosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Stvorite datoteku `webpack.config.js` u direktoriju `host-app` sa sljedećom konfiguracijom:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Objašnjenje:

• `name`: Naziv domaćinske aplikacije.
• `remotes`: Definira udaljene spremnike koje će domaćin koristiti. U ovom slučaju, koristi udaljeni spremnik nazvan `plugin` s `http://localhost:3001/remoteEntry.js`. Sintaksa `Plugin@` znači da je `name` udaljenog ModuleFederationPlugin-a 'Plugin'.
• `shared`: Navodi ovisnosti koje se dijele između domaćina i udaljenih spremnika. Ovo sprječava učitavanje duplih kopija tih ovisnosti. Korištenje `shared` je ključno za izbjegavanje pogrešaka i osiguravanje pravilnog funkcioniranja dodataka.

Stvorite direktorij `src` i dodajte datoteku `index.js` sa sljedećim sadržajem:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Objašnjenje:

• Koristimo `React.lazy` za dinamičko učitavanje `PluginComponent` iz udaljenog `plugin`. Ovo je ključno za lijeno učitavanje dodatka i izbjegavanje kašnjenja pri početnom učitavanju.
• Komponenta `Suspense` koristi se za rukovanje stanjem učitavanja dok se dodatak dohvaća.

Stvorite direktorij `public` i dodajte datoteku `index.html` sa sljedećim sadržajem:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Dodajte konfiguracijsku datoteku za Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Ažurirajte svoju `package.json` sa skriptom za pokretanje:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

            

              
                Copy
              
            
          

2. Postavljanje udaljene aplikacije (Spremnik za dodatke)

Stvorite novi direktorij projekta za dodatak:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Instalirajte Webpack i njegove ovisnosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Stvorite datoteku `webpack.config.js` u direktoriju `plugin-app` sa sljedećom konfiguracijom:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Objašnjenje:

• `name`: Naziv udaljenog spremnika (dodatka). Ovo **mora** odgovarati nazivu korištenom u konfiguraciji `remotes` domaćina.
• `filename`: Naziv ulazne datoteke udaljenog spremnika koju će domaćin preuzeti.
• `exposes`: Definira module koji su izloženi od strane udaljenog spremnika. U ovom slučaju, izlažemo modul `PluginComponent`. Ključ './PluginComponent' koristi se u izjavi za uvoz domaćina (npr. `import('plugin/PluginComponent')`).
• `shared`: Isto kao i kod domaćina, navodi dijeljene ovisnosti. Ključno je da su dijeljene ovisnosti i njihove verzije kompatibilne između domaćina i udaljenog spremnika.

Stvorite direktorij `src` i dodajte datoteku `PluginComponent.jsx` sa sljedećim sadržajem:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Dodajte datoteku `index.js` u direktorij `src` za izvoz PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;

            

              
                Copy
              
            
          

Stvorite direktorij `public` i dodajte datoteku `index.html` sa sljedećim sadržajem:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Dodajte konfiguracijsku datoteku za Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Ažurirajte svoju `package.json` sa skriptom za pokretanje:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

            

              
                Copy
              
            
          

3. Pokretanje aplikacija

Pokrenite obje aplikacije (domaćin i dodatak) pokretanjem `npm start` u njihovim odgovarajućim direktorijima.

Navigirajte do `http://localhost:3000` u svom pregledniku. Trebali biste vidjeti domaćinsku aplikaciju s dinamički učitanom komponentom dodatka.

Napredne značajke i razmatranja

Verzioniranje i vraćanje na prethodnu verziju

Module Federation podržava verzioniranje, omogućujući vam upravljanje različitim verzijama dodataka. Možete navesti ograničenja verzija u konfiguraciji `remotes` domaćina. Na primjer:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}

            

              
                Copy
              
            
          

Ovo govori domaćinu da koristi verziju 1.0.0 dodatka. Ako je dostupna novija verzija, domaćin će i dalje koristiti navedenu verziju dok se izričito ne ažurira. Implementacija robusnog verzioniranja ključna je za sprječavanje pogrešaka i osiguravanje stabilnosti aplikacije.

Sigurnosna razmatranja

Prilikom korištenja Module Federation, sigurnost je najvažnija. Razmotrite sljedeće:

• Autentifikacija i autorizacija: Implementirajte odgovarajuće mehanizme autentifikacije i autorizacije kako biste osigurali da samo ovlašteni korisnici mogu pristupiti i koristiti dodatke.
• Integritet koda: Provjerite integritet udaljenih modula kako biste spriječili ubacivanje zlonamjernog koda u aplikaciju. Razmotrite korištenje Politike sigurnosti sadržaja (CSP) za ograničavanje izvora s kojih aplikacija može učitavati resurse.
• Upravljanje ovisnostima: Pažljivo upravljajte ovisnostima i domaćina i udaljenih spremnika kako biste izbjegli ranjivosti. Redovito ažurirajte ovisnosti na najnovije verzije.
• Provjera ulaznih podataka: Provjerite sve podatke primljene iz udaljenih modula kako biste spriječili napade ubacivanjem.
• CORS (Cross-Origin Resource Sharing): Pravilno konfigurirajte CORS kako biste omogućili domaćinskoj aplikaciji pristup ulaznoj datoteci udaljenog spremnika iz aplikacije za dodatke.

Otkrivanje i upravljanje dodacima

Za složenije sustave dodataka možda će vam trebati mehanizam za otkrivanje i upravljanje dodacima. To se može postići putem registra dodataka ili usluge za otkrivanje. Središnji registar može pohraniti informacije o dostupnim dodacima, uključujući njihovu lokaciju, verziju i ovisnosti. Domaćinska aplikacija zatim može upitati registar kako bi pronašla i učitala odgovarajuće dodatke.

Razmotrite ove pristupe:

• Središnja konfiguracija: Pohranite URL-ove dodataka u središnju konfiguracijsku datoteku (npr. JSON datoteku) koju domaćinska aplikacija čita u vrijeme izvođenja. To vam omogućuje jednostavno dodavanje, uklanjanje ili ažuriranje dodataka bez ponovnog postavljanja domaćinske aplikacije.
• Otkrivanje putem API-ja: Stvorite API krajnju točku koja vraća popis dostupnih dodataka. Domaćinska aplikacija zatim može dohvatiti taj popis i dinamički učitati dodatke.
• Arhitektura vođena događajima: Koristite sabirnicu događaja ili red čekanja poruka kako biste obavijestili domaćinsku aplikaciju kada su novi dodaci dostupni. Ovo omogućuje asinkrono otkrivanje i učitavanje dodataka.

Dinamička konfiguracija i aktivacija dodataka

Omogućavanje korisnicima da dinamički konfiguriraju i aktiviraju dodatke snažna je značajka. To zahtijeva mehanizam za pohranu i upravljanje postavkama dodataka. Možete koristiti bazu podataka, konfiguracijsku datoteku ili uslugu za konfiguraciju u oblaku za pohranu postavki dodataka. Domaćinska aplikacija zatim može pročitati te postavke u vrijeme izvođenja i prema tome aktivirati dodatke. Razmotrite pružanje korisničkog sučelja za upravljanje konfiguracijom dodataka.

Rukovanje asinkronim operacijama i rukovanje pogreškama

Pri radu s dinamički učitanim dodacima, ključno je elegantno rukovati asinkronim operacijama i pogreškama. Koristite `async/await` ili Promises za upravljanje asinkronim kodom. Implementirajte odgovarajuće rukovanje pogreškama za hvatanje i zapisivanje svih pogrešaka koje se pojave tijekom učitavanja ili izvršavanja dodataka. Pružite informativne poruke o pogreškama korisniku. Razmotrite korištenje središnje usluge za zapisivanje pogrešaka za praćenje pogrešaka kroz sve dodatke.

Podjela koda i optimizacija performansi

Za optimizaciju performansi, koristite podjelu koda kako biste aplikaciju i dodatke podijelili na manje dijelove. To omogućuje pregledniku da preuzme samo kod koji je potreban za određenu stranicu ili značajku. Webpack pruža ugrađenu podršku za podjelu koda. Razmotrite korištenje lijenog učitavanja za učitavanje dodataka samo kada su potrebni. Minificirajte i komprimirajte kod kako biste smanjili veličinu datoteke.

Testiranje i kontinuirana integracija

Temeljito testirajte svoj sustav dodataka kako biste osigurali da ispravno funkcionira. Napišite unit testove, integracijske testove i end-to-end testove. Koristite sustav kontinuirane integracije (CI) za automatsko pokretanje testova kad god se kod promijeni. Implementirajte pipeline za kontinuiranu isporuku (CD) za automatizaciju postavljanja aplikacije i dodataka.

Primjeri iz stvarnog svijeta i slučajevi upotrebe

Module Federation se koristi u raznim aplikacijama iz stvarnog svijeta, uključujući:

• Platforme za e-trgovinu: Dinamičko učitavanje preporuka proizvoda, pristupnika za plaćanje i davatelja usluga dostave. Na primjer, globalna platforma za e-trgovinu mogla bi koristiti Module Federation za integraciju različitih davatelja plaćanja na temelju lokacije kupca. U Sjevernoj Americi mogla bi učitati dodatak za Stripe, dok bi u Europi mogla učitati dodatak za PayPal ili Klarnu.
• Sustavi za upravljanje sadržajem (CMS): Omogućavanje korisnicima instaliranja i aktiviranja dodataka za proširenje funkcionalnosti CMS-a. CMS bi mogao omogućiti korisnicima instaliranje dodataka za SEO optimizaciju, integraciju društvenih medija ili analizu sadržaja.
• Nadzorne ploče i platforme za analitiku: Dinamičko učitavanje različitih widgeta i vizualizacija. Globalna analitička platforma mogla bi učitati dodatke za različite izvore podataka, kao što su Google Analytics, Adobe Analytics ili Salesforce.
• Arhitekture mikrofrontova: Izgradnja velikih web aplikacija kao zbirke neovisno postavljenih mikrofrontova. Veliko poduzeće moglo bi koristiti Module Federation za izgradnju svoje web aplikacije kao zbirke mikrofrontova, od kojih je svaki odgovoran za određenu poslovnu funkciju, kao što su upravljanje računima, katalog proizvoda ili obrada narudžbi.
• Dizajnerski sustavi: Dijeljenje UI komponenti i dizajnerskih tokena u više aplikacija. Globalna organizacija s više brendova mogla bi koristiti Module Federation za dijeljenje zajedničkog dizajnerskog sustava u svim svojim aplikacijama, osiguravajući dosljednost i smanjujući razvojni napor.

Najbolje prakse za izgradnju dinamičkih sustava dodataka s Module Federation

Evo nekoliko najboljih praksi koje treba imati na umu pri izgradnji dinamičkih sustava dodataka s Module Federation:

• Neka dodaci budu mali i fokusirani: Svaki dodatak trebao bi biti odgovoran za specifičan dio funkcionalnosti. To olakšava održavanje i ažuriranje dodataka.
• Definirajte jasna sučelja dodataka: Definirajte jasna sučelja za način na koji dodaci komuniciraju s domaćinskom aplikacijom. Ovo osigurava da su dodaci kompatibilni s domaćinom i sprječava pogreške.
• Koristite semantičko verzijanje: Koristite semantičko verzijanje za upravljanje verzijama svojih dodataka. Ovo olakšava praćenje promjena i osiguravanje kompatibilnosti.
• Pružite dokumentaciju: Pružite jasnu i sažetu dokumentaciju za svoje dodatke. Ovo pomaže korisnicima razumjeti kako instalirati, konfigurirati i koristiti dodatke.
• Implementirajte sigurnosne najbolje prakse: Slijedite sigurnosne najbolje prakse kako biste zaštitili svoju aplikaciju i dodatke od ranjivosti.
• Pratite performanse dodataka: Pratite performanse svojih dodataka kako biste identificirali eventualna usko grla. Optimizirajte kod za poboljšanje performansi.
• Automatizirajte postavljanje: Automatizirajte postavljanje svoje aplikacije i dodataka. Ovo smanjuje rizik od pogrešaka i osigurava brzo postavljanje ažuriranja.
• Koristite dosljedan stil kodiranja: Primijenite dosljedan stil kodiranja u svim dodacima. Ovo čini kod lakšim za čitanje i održavanje.
• Napišite unit testove: Napišite unit testove za svoje dodatke kako biste osigurali da ispravno funkcioniraju.
• Koristite linter: Koristite linter za automatsko provjeravanje koda na pogreške.

Zaključak

JavaScript Module Federation pruža moćan i fleksibilan mehanizam za izgradnju dinamičkih sustava dodataka. Korištenjem Module Federation možete stvoriti modularne, skalabilne i održive aplikacije koje se mogu prilagoditi promjenjivim zahtjevima. Slijedeći najbolje prakse navedene u ovom članku, možete izgraditi robusne i sigurne sustave dodataka koji zadovoljavaju potrebe vaše organizacije.

Ova tehnologija je posebno vrijedna u međunarodnim kontekstima, omogućujući tvrtkama da prilagode svoje softverske ponude određenim regijama ili segmentima kupaca bez postavljanja potpuno odvojenih aplikacija. Od integracije lokalnih pristupnika za plaćanje do isporuke regionalno specifičnog sadržaja, Module Federation omogućuje personaliziranije i učinkovitije korisničko iskustvo globalno.